<script>

    export let file_id ="";

	let string = `this string contains some <strong>HTML!!!</strong>
    <p>Ordinarily, strings are inserted as plain text, meaning that characters like <code>&lt;</code> and <code>&gt;</code> have no special meaning.</p>
<p>But sometimes you need to render HTML directly into a component. For example, the words you&#39;re reading right now exist in a markdown file that gets included on this page as a blob of HTML.</p>
<p>In Svelte, you do this with the special <code>{@html ...}</code> tag:</p>
<div class='code-block'><pre class='language-markup'><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>{@html string}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></code></pre></div><blockquote>
<p>Svelte doesn&#39;t perform any sanitization of the expression inside <code>{@html ...}</code> before it gets inserted into the DOM. In other words, if you use this feature it&#39;s critical that you manually escape HTML that comes from sources you don&#39;t trust, otherwise you risk exposing your users to XSS attacks.</p>
</blockquote>
    `;
    
</script>

<div class="px-4 py-4">
    file_id=[{file_id}]
    {@html string}
</div>